<template>
  <MiDialog>
    <div class="header" slot="a">
      <p>声明与政策</p>
    </div>
    <div class="content" slot="b">
      <p>欢迎您来到小米有品！</p>
      <p>
        您可在有品进行商品浏览、支付购买、售后服务等功能。
        我们将严格遵守相关法律法规和隐私政策以保护您的个
        人信息。请您阅读并同意
        <a>《小米有品用户协议》、</a>
        <a>《隐私政策》、</a>
        <a>《小米账号使用协议》、</a>
        和
        <a>《小米账号隐私协议》。</a>
      </p>                
    </div>
    <div class="footer" slot="c">
      <button @click="noaccept">不同意</button>
      <button @click="accept">同意</button>
    </div>
  </MiDialog>
</template>

<script>
import MiDialog from "../MiDialog/MiDialog.vue";
import router from "@/router";

export default {
  name: "MiLoginWarning",
  components: { MiDialog },
  data() {
    return { resolve: null };
  },
  methods: {
    accept() {
      router.push('/login')
      this.$destroy(true);
      document.body.removeChild(this.$el);
    },
    noaccept() {
      this.$destroy(true);
      document.body.removeChild(this.$el);
    },
  },
};
</script>

<style scoped>
.header{
  text-align: center;
  color: rgb(51, 51, 51);
  font-size: 17px;
  margin-top: 19px;
}
.content{
  font-size: 13px;
  color: rgb(153, 153, 153);
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 15px;
  line-height: 23px;
}
.content p:nth-child(2) a{
  color: rgb(159, 128, 82);
  text-decoration: none;
}
.footer{
  border: 0px solid black;
  border-color: rgb(242, 242, 242);
  border-top-width: 2px;
  margin-top: 20px;
}
.footer button{
  border: 0px solid black;
  border-color: rgb(242, 242, 242);
  border-right-width: 2px;
  height: 51px;
  width: 157.5px;
  background-color: #fff;
  font-size: 14px;
}
.footer button:first-child{
  color: rgb(153, 153, 153);
}
.footer button:last-child{
  color: rgb(132, 95, 63);
}
</style>